<template>
  <div class="register">
    <div class="register-top">
      <span>注册</span>
    </div>
    <div class="user-form">
      <ul>
        <li>
          <span>&nbsp&nbsp&nbsp&nbsp联系人:</span>
          <ks-register-input
            type="text"
            placeholder="请填写姓名"
            @input="onInputContact"
            :value="contact"
            :maxLength=8
          />
        </li>
        <li>
          <span>手机号码:</span>
          <ks-register-input
            type="text"
            placeholder="11位有效的手机号码"
            @input="onInputCellphone"
            :value="cellphone"
            :maxLength=11
          />
        </li>
        <li>
          <span>&nbsp&nbsp&nbsp&nbsp验证码:</span>
          <ks-register-input
            type="text"
            placeholder="短信收到的验证码"
            :verificationContent="verificationContent"
            @input="onInputVerificationCode"
            :value="verificationCode"
            :isShowVerificationBtn=true
            :isUseVerification="isUseVerification"
            :buttonClick="btnCountDown"
          />
        </li>
        <li>
          <span>输入密码:</span>
          <ks-register-input
            type="password"
            placeholder="6-26位英文字母、数字或者下划线"
            @input="onInputPassword"
            :value="password"
            :maxLength=26
          />
        </li>
        <li>
          <span>&nbsp&nbsp&nbsp&nbsp邀请码:</span>
          <ks-register-input
            type="text"
            placeholder="请已注册的同事为您提供邀请码"
            @input="onInputInviteCode"
            :value="inviteCode"
          />
        </li>
      </ul>
    </div>
    <div class="hint">{{ hint }}</div>
    <div class="register-box">
      <button
        @click="clickRegister"
        :disabled="!isUseRegisterBtn"
        :class="[isUseRegisterBtn ? 'register-btn': '']"
        class="submit"
      >
        <span>确定</span>
      </button>
    </div>
    <div class="agreement-box">
      <div @click="onClickTheAgreement" :class="[isAgree ? 'selected' : 'check-box']">
      </div>
      <div class="agreement">
        <span @click="onClickTheAgreement">我已阅读并同意</span>
        <span @click="toTheAgreement">《入驻协议》</span>
      </div>
    </div>
  </div>
</template>
<script>
  import KsRegisterInput from '../components/KsRegisterInput';
  import { getVerificationCode, register } from '../api/user';
  import logger from '../utils/logger';
  export default {
    components: {
      'ks-register-input': KsRegisterInput
    },
    data() {
      return {
        verificationContent: '获取验证码',
        contact: '',
        cellphone: '',
        verificationCode: '',
        password: '',
        inviteCode: '',
        isAgree: false,
        isUseVerification: false,
        isRegistering: false,
        hint: '',
        code: 0,
        isRequest: false
      };
    },
    methods: {
      onInputContact(val) {
        this.contact = val;
      },
      onInputCellphone(val) {
        this.cellphone = val;
        const pattern = /^1[34578]\d{9}$/;
        this.isUseVerification = pattern.test(val) && !this.time;
      },
      onInputVerificationCode(val) {
        this.verificationCode = val;
      },
      onInputPassword(val) {
        this.password = val;
      },
      onInputInviteCode(val) {
        this.inviteCode = val;
      },
      onClickTheAgreement() {
        this.isAgree = !this.isAgree;
      },
      toTheAgreement() {
        this.$router.push('/register/agreement');
      },
      async btnCountDown() {
        if (!this.isRequest) {
          this.isRequest = true;
          try {
            const result = await getVerificationCode(this.cellphone);
            this.isRequest = false;
            this.hint = '';
            this.code = result.data.code;
            let seconds = 120;
            this.time = setInterval(() => {
              seconds--;
              this.isUseVerification = false;
              this.verificationContent = seconds + 's';
              if (seconds === 0) {
                clearInterval(this.time);
                this.time = 0;
                this.isUseVerification = true;
                this.verificationContent = '获取验证码';
              }
            }, 1000);
          } catch (err) {
            this.isRequest = false;
            if (err.response.data.code === 405) {
              this.hint = err.response.data.message;
            } else {
              this.hint = '系统繁忙，请稍后再试';
            }
          }
        }
      },
      async clickRegister() {
        const pattern = /^1[34578]\d{9}$/;
        if (!pattern.test(this.cellphone)) {
          this.hint = '手机号码不为11位';
          return;
        }

        if (this.code !== Number(this.verificationCode)) {
          this.hint = '验证码输入有误';
          return;
        }

        if (this.password.length < 6) {
          this.hint = '6-26位英文字母、数字或者下划线';
          return;
        }
        this.hint = '';
        const jsonBody = {
          contact: this.contact,
          cellphone: this.cellphone,
          verificationCode: this.verificationCode,
          password: this.password,
          registerSource: 'WEIXIN'
        };
        this.isRegistering = true;
        if (!this.isUseRegisterBtn) {
          try {
            const result = await register(jsonBody, this.inviteCode);
            if (result.data.user.userLoginId) {
              this.$router.push({path: '/user', query: { origin: 'REGISTER' }});
              window._META_INFO = Object.assign(window._META_INFO, result.data);
            }
            logger.log(result);
            this.isRegistering = false;
          } catch (err) {
            this.hint = '系统繁忙，请稍后再试';
            this.isRegistering = false;
          }
        }
      }
    },
    computed: {
      // 非空校验
      isUseRegisterBtn() {
        return this.contact &&
          this.inviteCode &&
          this.cellphone &&
          this.verificationCode &&
          this.password &&
          this.isAgree &&
          !this.isRegistering;
      }
    }
  };
</script>
<style scoped>
  .register-top {
    height: 1rem;
    font-size: 0.36rem;
    background: url('../assets/register-top.png') no-repeat ;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }
  .user-form {
    margin-top: 1.28rem;
    color: #282828;
    font-size: 0.32rem;
  }
  .register-box {
    padding: 0 0.7rem;
  }
  .submit {
    height: 0.88rem;
    width: 100%;
    outline: none;
    flex: 1;
    border-radius: 0.4rem;
    border: 1px solid #bfbfbf;
    background-color: #bfbfbf;
    font-size: 0.36rem;
    color: #ffffff;
  }
  .register-btn {
    color: #ffffff;
    background-image:linear-gradient(to right,#578DE4,#3BC7DD);
  }
  .agreement-box{
    padding: 0 20%;
    display: flex;
    margin-top: 0.2rem;
  }

  .check-box {
    margin-top: 0.05rem;
    font-size: 0;
    height: 0.3rem;
    width: 0.3rem;
    background: url("../assets/frame.png") no-repeat;
    background-size: contain;
  }
  .selected {
    margin-top: 0.05rem;
    font-size: 0;
    height: 0.3rem;
    width: 0.3rem;
    background: url("../assets/hook.png") no-repeat;
    background-size: contain;
  }
  .agreement {
    margin-left: 0.2rem;
    font-size: 0.26rem;
  }
  .agreement span:nth-child(2){
    color: #e43439;
  }
  ul{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  li {
    margin: 0 0.9rem 0.1rem 0.63rem;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .hint {
    height: 0.3rem;
    font-size: 0.2rem;
    color: #e43439;
    text-align: left;
    margin-left: 0.7rem;
    margin-bottom: 0.2rem;
  }
</style>
